<template>
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="search"></searchData>

    <a-card>
<!--      <title-name title="分包商类型列表" />-->
      <a-button class="mb12 " type="primary" :disabled="selectRow.id==null" @click="add" v-if="hideBuquBtn()">增加同级</a-button>
      <a-button class="mb12 ml12 " type="primary" :disabled="selectRow.id==null" @click="addChild" v-if="hideBuquBtn()">增加下级</a-button>
      <!--      <a-button class="mb12 ml12" type="primary" @click="getData()">刷新</a-button>-->
      <a-table
        :pagination="false"
        :rowClassName="rowClassName"
        :loading="loading"
        :customRow="customRow"
        rowKey="id"
        :expandRowByClick="!editing"
        :columns="columns"
        :data-source="list"
        :expandedRowKeys="expandedRowKeys"
        :expandIcon="expandIcon"
      >
        <template slot="name" slot-scope="text, record">
          <b-input class="requiredFormItem" v-model="record.name" v-if="record.edit"
                   style="width: 300px;display: inline-block;"
          />
          <span v-else>{{ text }}</span>
        </template>
        <div slot="disabled" slot-scope="text, record">
          <span class="requiredFormItem" v-if="record.edit">
            <a-select v-model="record.disabled" style="width: 100px;" @change="change(record)">
              <a-select-option :value="1">不可用</a-select-option>
              <a-select-option :value="0">可用</a-select-option>
            </a-select>
          </span>
          <span v-else>{{ text === 1 ? '不可用' : '可用' }}</span>
        </div>
        <div slot="actions" slot-scope="text, record" class="pub-table-list-action">
          <template v-if="record.edit">
            <span @click.stop="submit(record)">提交</span>
            <span @click.stop="cancel(record)">取消</span>
          </template>
          <template v-else >
            <span v-if="hideBuquBtn()" @click.stop="select(record)">编辑</span>
            <!--            <span @click.stop=" record.edit = true;editing = true">编辑</span>-->
          </template>
        </div>
      </a-table>
    </a-card>

  </base-breadcrumb>
</template>

<script>
import api from '@/api/project/typeMaintenance.js'

export default {
  name: 'a' + Date.now(),
  data() {
    return {
      searchArr: [
        {
          name: '分包商类型名称',
          type: 'input',
          value: 'name'
        }
      ],
      form: {},
      list: [],
      copyList: [],
      addType: 'normal',
      visible: false,
      editing: false,
      loading: false,
      columns: [
        {
          title: '分类名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '状态',
          dataIndex: 'disabled',
          width: 150,
          scopedSlots: { customRender: 'disabled' }
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 150,
          scopedSlots: { customRender: 'actions' }
        }
      ],
      selectRow: {
        id: null
      },
      rowClassName: r => {
        return r.id === this.selectRow.id ? 'select' : ''
      },
      expandedRowKeys: [],
      customRow: record => {
        return {
          on: { // 事件
            click: (event) => {
              // console.log('editing', this.editing)
              this.onExpand(record)
            }
          }
        }
      },
      params: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onExpand(record) {
      if (!this.editing) {
        if (this.selectRow.id === record.id) {
          this.selectRow = { id: null }
        } else {
          this.selectRow = record
        }
        this.toggle(record.id)
        // console.log('选中', record)
      }
    },
    toggle(id) {
      let res = this.expandedRowKeys.findIndex(v => v === id)
      if (res === -1) {
        this.expandedRowKeys.push(id)
      } else {
        this.expandedRowKeys.splice(res, 1)
      }
    },
    expandIcon(props) {
      if (props.record.children && props.record.children.length) {
        if (props.expanded) {//有数据-展开时候图标
          return (
          <div role="button" tabIndex="0" aria-label="关闭行" class="ant-table-row-expand-icon ant-table-row-expanded"></div>
        )
        } else {//有数据-未展开时候图标
          return (
            <div role="button" tabIndex="0" aria-label="展开行" class="ant-table-row-expand-icon ant-table-row-collapsed"></div>
          )
        }
      } else {//无数据-图标
        return <span class="ant-table-row-expand-icon ant-table-row-spaced"></span>
      }
    },
    search(val) {
      if (val) {
        this.params = val
      }
      this.getData()
    },
    async getData() {
      this.loading = true
      let res = await api.labelTreeList(this.params)
      this.loading = false
      if (res.code === 200) {
        this.list = this.$clone(this.digui2(res.data))
        this.copyList = this.$clone(this.digui2(res.data))
      }
    },
    digui2(list) {
      list.map(v => {
        v.disabled = v.disabled ? 1 : 0
        v.edit = false
        if (v.children) {
          this.digui2(v.children)
        }
      })
      return list
    },
    addChild() {
      if (this.editing) return
      if (this.selectRow.id) {
        this.editing = true
        this.addType = 'child'
        this.list = this.diguiAddChild(this.list)


        let res = this.expandedRowKeys.findIndex(v => v === this.selectRow.id)
        if (res === -1) {
          this.expandedRowKeys.push(this.selectRow.id)
        }
      } else {
        this.$noticeWarning('请先选择上级节点')
      }
    },
    diguiAddChild(list) {
      list.map(v => {
        if (v.id === this.selectRow.id) {
          if (v.children) {
            v.children.push({
              id: 'add',
              edit: true,
              disabled: 0
            })
          } else {
            v.children = [{
              id: 'add',
              edit: true,
              disabled: 0
            }]
          }
        } else {
          if (v.children) {
            v.children = this.diguiAddChild(v.children)
          }
        }
      })
      return list
    },
    add() {
      if (this.editing) return
      if (this.selectRow.id) {
        this.editing = true
        this.addType = 'normal'
        let parentId = this.diguiFindParent(this.list, this.selectRow.id, null)
        console.log('parentId', parentId)
        if (parentId) {
          this.diguiAdd(this.list, parentId)
        } else {
          let rIndex = this.list.findIndex(v => v.id === this.selectRow.id)
          if (rIndex !== -1) {
            let start = this.list.slice(0, rIndex + 1)
            let end = this.list.slice(rIndex + 1, this.list.length - 1)
            this.list = start.concat([{
              id: 'add',
              edit: true,
              disabled: 0
            }]).concat(end)
          }
        }
      } else {
        this.$noticeWarning('请先选择上级节点')
      }
    },
    diguiAdd(list, parentId) {
      list.map(v => {
        if (v.id === parentId) {
          if (v.children) {
            // v.children.push({
            //   id: 'add',
            //   edit: true,
            //   disabled: 0
            // })
            let rIndex = v.children.findIndex(v => v.id === this.selectRow.id)
            if (rIndex !== -1) {
              let start = v.children.slice(0, rIndex + 1)
              let end = v.children.slice(rIndex + 1, v.children.length - 1)
              v.children = start.concat([{
                id: 'add',
                edit: true,
                disabled: 0
              }]).concat(end)
            }
          } else {
            v.children = [{
              id: 'add',
              edit: true,
              disabled: 0
            }]
          }
        } else {
          if (v.children) {
            this.diguiAdd(v.children, parentId)
          }
        }
      })
    },
    async submit(r) {
      console.log('select', this.selectRow)
      let res
      this.loading = true
      if (r.id !== 'add') {
        let data = this.$clone(r)
        data.enabled = data.disabled !== 1
        // res = await api.edit({}, r)
        if (data.disabled) {
          res = await api.editUnableId({}, data)
        } else {
          res = await api.editAbleId({}, data)
        }
      } else {
        let data = {
          'code': '',
          'type': 'SUB_CONTRACTOR_TYPE',
          enabled: r.disabled !== 1,
          name: r.name
        }
        if (this.addType === 'child') {
          data.parentId = this.selectRow.id
        } else {
          data.parentId = this.diguiFindParent(this.list, this.selectRow.id, null)
        }
        // data.parentId = ''
        console.log(data)
        res = await api.create({}, data)
      }
      if (res.code === 200) {
        await this.getData()
      }
      this.editing = false
      this.loading = false
    },
    cancel(r) {
      r.edit = false
      this.editing = false
      this.list = this.$clone(this.copyList)
    },
    diguiFindParent(list, id, parentId) {
      let res
      for (let i = 0; i < list.length; i++) {
        let v = list[i]
        if (v.id === id) {
          res = parentId
          return res
        } else if (v.children && v.children.length) {
          res = this.diguiFindParent(v.children, id, v.id)
          if (res) {
            return res
          }
        }
      }
      return res
    },
    change(row) {
      console.log(row)
      let r = this.diguiHasChild(this.list, row.id)
      if (r && row.disabled == 1) {
        this.$confirm({
          title: '该分包商类型及下级分包商类型将全部变为不可用状态',
          onOk: () => {
            row.disabled = 1
            // this.list = this.diguiReplace(this.list, row.id, 0)
          },
          onCancel: () => {
            row.disabled = 0
            // this.list = this.diguiReplace(this.list, row.id, 1)
          },
          class: 'test'
        })
      }
      console.log('r', r)
    },
    diguiReplace(list, id, disabled) {
      list.map(v => {
        if (v.id === id) {
          v.disabled = disabled
        } else {
          if (v.children) {
            v.children = this.diguiReplace(v.children)
          }
        }
      })
      return list
    },
    diguiHasChild(list, id) {
      let res = false
      for (let i = 0; i < list.length; i++) {
        let v = list[i]
        if (v.id === id) {
          if (v.children && v.children.length) {
            return res = true
          }
        } else if (v.children && v.children.length) {
          res = this.diguiHasChild(v.children, id)
          if (res) {
            return res
          }
        }
      }
      return res
    },
    select(record) {
      this.selectRow = record
      record.edit = true
      this.editing = true
    }
  }
}
</script>
<style lang="less">
.select {
  background: rgb(230, 247, 255);

  &:hover {
    background: rgb(230, 247, 255);
  }
}
</style>
